<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增主题游戏列表')" />
    <th:block th:include="include :: select2-css" />
    <style>
       charset "UTF-8";.select2-result-repository {
		    padding-top: 4px;
		    padding-bottom: 3px
		}
		
		.select2-result-repository__avatar {
		    float: left;
		    width: 60px;
		    margin-right: 10px
		}
		
		.select2-result-repository__avatar img {
		    width: 100%;
		    height: auto;
		    border-radius: 2px
		}
		
		.select2-result-repository__meta {
		    margin-left: 70px
		}
		
		.select2-result-repository__title {
		    color: black;
		    font-weight: 700;
		    word-wrap: break-word;
		    line-height: 1.1;
		    margin-bottom: 4px
		}
		
		.select2-result-repository__forks,.select2-result-repository__stargazers {
		    margin-right: 1em
		}
		
		.select2-result-repository__forks,.select2-result-repository__stargazers,.select2-result-repository__watchers {
		    display: inline-block;
		    color: #aaa;
		    font-size: 11px
		}
		
		.select2-result-repository__description {
		    font-size: 13px;
		    color: #777;
		    margin-top: 4px
		}
		
		.select2-results__option--highlighted .select2-result-repository__title {
		    color: white
		}
		
		.select2-results__option--highlighted .select2-result-repository__forks,.select2-results__option--highlighted .select2-result-repository__stargazers,.select2-results__option--highlighted .select2-result-repository__description,.select2-results__option--highlighted .select2-result-repository__watchers {
		    color: #c6dcef
		}
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-topicgame-add">
            <input type="hidden" id="topicId" name="topicId" th:value="${topicId}">
            <div class="form-group">    
                <label class="col-sm-3 control-label">游戏：</label>
                <div class="col-sm-8">
                   <select class="form-control noselect2" id="gameId" name="gameId">
                     <option value="">-----选择游戏-----</option>
                   </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="sort" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <script type="text/javascript">
        var prefix = ctx + "game/topicgame"
        $("#form-topicgame-add").validate({
            focusCleanup: true
        });
        
        function formatRepoSelection (repo) {
            return repo.name || repo.nameEn;
        }
        
        function formatRepo (repo) {
        	
        	  if (repo.loading) {
        	    return repo.text;
        	  }

        	  var $container = $(
        	    "<div class='select2-result-repository clearfix'>" +
        	      "<div class='select2-result-repository__avatar'><img src='" + repo.icon + "' /></div>" +
        	      "<div class='select2-result-repository__meta'>" +
        	        "<div class='select2-result-repository__title'></div>" +
        	        "<div class='select2-result-repository__description'></div>" +
        	        "<div class='select2-result-repository__statistics'>" +
        	          "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> </div>" +
        	          "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> </div>" +
        	          "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> </div>" +
        	        "</div>" +
        	      "</div>" +
        	    "</div>"
        	  );

        	  $container.find(".select2-result-repository__title").text(repo.name);
        	  $container.find(".select2-result-repository__description").text(repo.shortDesc);
   
        	  return $container;
        }
        
        $('#gameId').select2({
        	  ajax: {
        	    url: '/game/game/search',
        	    dataType: 'json',
        	    delay: 250,
        	    processResults: function (data, params) {
        	        params.page = params.page || 1;
        	        return {
        	          results: data.rows,
        	          pagination: {
        	            more: false
        	          }
        	        };
        	    },
        	  },
        	  placeholder: '选择游戏',
      	      minimumInputLength: 0,
      	      templateResult: formatRepo,
      	      templateSelection: formatRepoSelection
        });
        
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-topicgame-add').serialize());
            }
        }
    </script>
</body>
</html>